<template>
    <view v-if="orderInfo.length !== 0">
        <view class="header">
            <view class="user-info">
                <view class="address-mark" v-if="orderInfo.is_default_address == 1">默认</view>
                <view class="user-name-phone">{{orderInfo.contacts}} {{orderInfo.mobile}}</view>
            </view>
            <view class="address">{{orderInfo.full_address}}</view>
        </view>
        <view class="shopping">
            <view class="shopping-box" v-for="(item, index) in orderInfo.detail" :key="index">
                <view class="shopping-img">
                    <img :src="item.spu.commodity_image_thum" alt="" style="width:100%;height:100%">
                </view>
                <view class="shopping-info">
                    <view class="shopping-name">{{item.spu_name}}</view>
                    <view class="shopping-price">￥{{item.original_price}}</view>
                    <view class="shopping-text">共{{item.number}}件商品，合计￥{{item.total_price}}（含运费）</view>
                </view>
            </view>
        </view>
        <view class="shopping-info-list">
            <view class="list-item">商品总价：￥{{orderInfo.order_total_price}}</view>
            <view class="list-item">运费：包邮</view>
            <view class="list-item">订单编号：{{orderInfo.internal_order_sn}}</view>
            <view class="list-item">付款时间：{{orderInfo.order_status == 1 ? '支付后显示' : orderInfo.payment_at}}</view>
            <view class="list-item">发货时间：{{orderInfo.send_at ? orderInfo.send_at : '发货后显示'}}</view>
            <view class="list-item">支付方式：{{orderInfo.order_status == 1 ? '支付后显示' : '微信支付'}}</view>
            <!-- <view class="list-item">订单备注：{{orderInfo.remarks ? orderInfo.remarks : '无'}}</view> -->
            <view class="list-item">实付款：<text style="color:#FF2525">{{orderInfo.order_status == 1 ? '未支付' : '￥' + orderInfo.order_total_price}}</text></view>
        </view>
        <view class="bottom-button" v-if="orderInfo.order_status == 1 && orderInfo.is_refund == 0">
            <view class="button2" @tap.stop="orderPayment(orderInfo)">付款</view>
            <view class="button1" @tap.stop="cancelOrder(orderInfo)">取消订单</view>
        </view>
        <view class="bottom-button" v-if="orderInfo.order_status == 2 && orderInfo.is_refund == 0">
            <!-- <view class="button2">退款</view> -->
            <view class="button1">催单</view>
        </view>
        <view class="bottom-button" v-if="orderInfo.order_status == 3 && orderInfo.is_refund == 0">
            <view class="button2" @tap.stop="goConfirmReceipt(orderInfo)">确认收货</view>
            <view class="button1" @tap.stop="goPhysicalDistribution">查看物流</view>
        </view>
        <view class="bottom-button" v-if="orderInfo.order_status == 4 && orderInfo.is_refund == 0">
            <view class="button2" @tap.stop="goAssessment(orderInfo)">评价</view>
            <!-- <view class="button1">退货</view> -->
        </view>
        <pay :showPay="showPay" @close="closePayType" :orderData="orderData"></pay>
    </view>
</template>

<script>
import { OrderModel } from '../../model/order'
import pay from '../../components/pay/pay'
const orderModel = new OrderModel()
export default {
    data() {
        return {
            orderId: '',
            orderInfo: [],
            orderData: {},
            showPay: false
        }
    },
    components: {
        pay
    },
    methods: {
        getOrderDetail() {
            orderModel.getOrderDetail(this.orderId).then((res) => {
                if(res.code == 200) {
                    this.orderInfo = res.data
                }
            })
        },
        // 付款
        orderPayment(orderInfo) {
            console.log(orderInfo)
            this.showPay = true
            this.orderData = { order_id: orderInfo.id, type: 1, price: orderInfo.order_total_price, commidty_type: 0 }
        },
        closePayType() {
            this.showPay = false
        },
    },
    onLoad(option) {
        this.orderId = option.orderId
        this.getOrderDetail()
    }
}
</script>

<style>
    .header {
        height: 101rpx;
        background: #ffffff;
        padding: 30rpx 0 30rpx 65rpx;
    }
    .user-info {
        display: flex;
        justify-content: left;
    }
    .address-mark {
        width: 65rpx;
        height: 31rpx;
        background: #24C79C;
        color: #FFFFFF;
        font-size: 22rpx;
        text-align: center;
        line-height: 30rpx;
        border-radius: 5rpx;
        margin-top: 6rpx;
        margin-right: 27rpx;
    }
    .user-name-phone {
        color: #333333;
        font-size: 28rpx;
        font-weight: 500;
    }
    .address {
        color: #333333;
        font-size: 30rpx;
        font-weight: 500;
        margin-top: 30rpx;
    }
    .group-detail {
        margin-top: 20rpx;
        
    }
    .shopping {
        padding: 38rpx 0 14rpx 58rpx;
        margin-top: 20rpx;
        background: #FFFFFF;
    }
    .shopping-box {
        margin-bottom: 20rpx;
        display: flex;
        justify-content: left;
    }
    .shopping-img {
        width: 139rpx;
        height: 139rpx;
    }
    .shopping-info {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-left: 23rpx;
    }
    .shopping-name {
        color: #333333;
        font-size: 28rpx;
        font-weight: 500;
    }
    .shopping-price {
        color: #FF1E1E;
        font-size: 30rpx;
    }
    .shopping-text {
        color: #999999;
        font-size: 24rpx;
    }
    .shopping-info-list {
        padding: 40rpx 0 0 40rpx;
        background: #FFFFFF;
        margin-top: 20rpx;
    }
    .list-item {
        height: 76rpx;
        color: #333333;
        font-size: 26rpx;
        font-weight: 500;
    }
    .bottom-button {
        position: absolute;
        left: 0rpx;
        bottom: 0rpx;
        width: 750rpx;
        height: 104rpx;
        background: #FFFFFF;
        box-shadow: 0rpx 8rpx 32rpx 0rpx rgba(0, 0, 0, 0.1);
        display: flex;
        flex-direction: row-reverse;
        justify-content: left;
    }
    .bottom-button .button2 {
        width: 122rpx;
        height: 46rpx;
        border: 1rpx solid #24C79C;
        text-align: center;
        font-size: 28rpx;
        line-height: 46rpx;
        color: #24C79C;
        margin: 29rpx 15rpx 0;
        border-radius: 23rpx;
    }
    .bottom-button .button1 {
        width: 122rpx;
        height: 46rpx;
        border: 1rpx solid #E5E5E5;
        text-align: center;
        font-size: 28rpx;
        line-height: 46rpx;
        color: #999999;
        margin: 29rpx 15rpx 0;
        border-radius: 23rpx;
    }
</style>